<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="昵称">
        <el-input v-model="queryCarDTO.userName" placeholder="用户昵称"/>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="queryCarDTO.carNumber" placeholder="车牌号码"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!--数据显示列表-->
    <el-table :data = "dataList" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="carNumber" label="车牌号码" width="160"/>
      <el-table-column prop="carType" label="车辆类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.carType == '1'">蓝牌</span>
          <span v-if="scope.row.carType == '2'">未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="所属用户" width="130"/>
      <el-table-column prop="orderNumber" label="订单数量" width="80"/>
      <el-table-column prop="noPayOrder" label="未缴费订单" width="100"/>
      <el-table-column prop="consumeAmount" label="消费金额" width="80"/>
      <el-table-column prop="noConsumeSum" label="待消费金额" width="130"/>
      <el-table-column prop="status" label="车辆状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">正常</span>
          <span v-if="scope.row.status == '1'">禁用中</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button type="primary" style="margin-left: 16px;" size="small" @click="handledetails(scope.row.id)">订单记录</el-button>
          <el-button type="danger" size="small" icon="el-icon-paperclip" @click="handledeleted(scope.row.id)">解除绑定</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      :direction="direction"
      :visible.sync="drawer"
      title="订单详情"
      size="50%">
      <el-descriptions>
        <el-descriptions-item>
          <el-table :data = "carOrderList" fit highlight-current-row>
            <el-table-column type="index" label="序号" width="70">
              <template slot-scope="scope">
                <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderCode" label="订单编号" width="180"/>
            <el-table-column prop="createTime" label="提交时间" width="180"/>
            <el-table-column prop="carNumber" label="车牌号码" width="100"/>
            <el-table-column prop="price" label="订单金额" width="130"/>
            <el-table-column prop="orderStatus" label="订单状态" width="130">
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == '1'">进行中</span>
                <span v-if="scope.row.orderStatus == '2'">待支付</span>
                <span v-if="scope.row.orderStatus == '3'">已支付</span>
                <span v-if="scope.row.orderStatus == '4'">已完成</span>
                <span v-if="scope.row.orderStatus == '5'">申述中</span>
                <span v-if="scope.row.orderStatus == '6'">申述失败</span>
                <span v-if="scope.row.orderStatus == '7'">已退款</span>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[1, 2, 3, 4,5]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>
<script>
import car from '@/api/car'
export default {
  data() {
    return {
      dataList: [],
      listLoading: true, // 加载数据
      queryCarDTO: {}, // 查询条件对象
      currentPage: 1, // 当前页
      pageSize: 10, // 每页记录数
      total: null,
      imageUrl: null,
      drawer: false, // 抽屉
      direction: 'ltr', // 抽屉打开的方向
      carOrderList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 每页记录数发生变化
    handleSizeChange(size) {
      this.pageSize = size
      this.getList()
    },
    // 当前页发生变化
    handleCurrentChange(current) {
      this.currentPage = current
      this.getList()
    },
    // 清空搜索框内容
    resetData() {
      this.queryCarDTO = {}
      this.getList()
    },
    // 页面初始化数据查询, 根据分页参数及搜索条件
    getList() {
      car.getList(this.currentPage, this.pageSize, this.queryCarDTO).then(res => {
        this.dataList = res.data.data
        this.total = res.data.total
      })
    },
    handleRemove(id) {
      car.disabled(id, 1).then(res => {
        // 显示提示信息
        this.$message.success(res.message)
        // 重新查询分页数据
        this.getList()
      })
    },
    handledetails(id) {
      this.drawer = true
      car.QueryOrderByCarId(id).then(res => {
        this.carOrderList = res.data
        console.log(res.data)
      })
    },
    handledeleted(id) {
      car.deleteCar(id).then(res => {
        // 显示提示信息
        this.$message.success(res.message)
        // 重新查询分页数据
        this.getList()
      })
    }
  }
}
</script>
